<template>
	<view style="width: 100vw;height: 100vh;">
		<scroll-view scroll-y="true" style="height:96vh;">
			<view style="margin-top: 15px;">
				<view class="list-title">{{cnObj.commandtitle}}</view>
				<basic-drag v-model="list" :column="4"  :clientType='clientType' itemshow="optype" itemKey="menuname" itemIcon="piciconurl" @deleteitem='deleteitem(arguments)'>
					<template #item="{element}">
						<view class="drag-item" >{{ element.menuname }}</view>
					</template>
				</basic-drag>
			</view>
		
			<view v-for="(item3,index3) in menulist" :key="index3">
				<view class='menu_text' :style="{'font-size':clientType=='pda'?'16px':'10px'}">{{item3.menuname}}</view>
				<view v-if="JSON.stringify(item3.children) != undefined" class='cq_nav'>
					<view v-for="(item,index) in item3.children" :key="index">
						<view class='cq_nav' style="display: flex;position: relative;"  @click='onItemClick(index3,index,-1)'>
							<view class='cq_nav_item'>
								<image class='cq_nav_item_image' :src='item.piciconurl'></image>
								<text class='cq_nav_item_text' :style="{'font-size':clientType=='pda'?'16px':'10px'}">{{item.menuname}}</text>
							</view>
							<view v-if="item.visble" class="iconfont icon-jia" ></view>
						</view>
					</view>
				</view>
				
			</view>
		</scroll-view>
		
		<view class="bottom-wrapper">
			<view class="btn-main">
				<view @click="btnclick(0)" class="btn-item">{{btns[0].text}}</view>
			</view>
		</view>
	</view>
</template>

<script>
import BasicDrag from '@/components/basic-drag/index.vue';
var util = require("../../utils/util.js");
var common = require("../../utils/api/common.js")
var processInitialData = require("../../utils/processInitialData.js")
var infolistutil = require("../../utils/infolistutil.js");

const app = getApp().globalData;
export default {
	components: { BasicDrag },
	data() {
		return {
			list: [],
			olddatalist:[],
			menus: [],
			menulist: [],
			currentTab: 0,
			itemname: '',
			modcode2: '',
			divArea:'',
			div:{},
			dataObject:'',
			isrequest:true,
			btns:[{"name": "save","text": "确认","type": "save",
				"visible": true,"btnToDo": "save","clicked": {}}],
			preoptions:{'pagename':'appsj_setcommandmod',
						'templetname':'appsj_setcommandmod',
						"menuid":"",
						"modid":"appsj_setcommandmod"},	
						
			pageConditions:{"pageNumber": 1,"rowsPerPage": 20,"isAllData": true},
			clientType:'',
			enObj:{'commandtitle':'Common functions', 'prompt':'Prompt','toastTitle':'Operation successful!','content':'You can only add up to 8 at most!','load':'Loading'},
			cnObj:{'commandtitle':'常用功能','prompt':'提示','toastTitle':'操作成功!','content':'最多只能添加8个!','load':'加载中'}
		};
	},
	
	onLoad:async function(options){
		var that = this
		this.clientType = uni.getStorageSync('clientType')
		let  i18n = uni.getStorageSync('i18n')
		if(i18n === 'en'){
			uni.setNavigationBarTitle({'title':'Set common functions'})
			this.cnObj = this.enObj
		}
		if(this.clientType == 'pda'){
			that.preoptions = {'pagename':'appsj_setcommand_pda','templetname':'appsj_setcommand_pda',
						"menuid":"","modid":"appsj_setcommand_pda"}
		}
		var injson = common.requestStylePre(that.preoptions)
		var url = getApp().globalData.app_address + '?method=saas_PageStyle&parse=json'
		const { data: res } = await infolistutil.post2(url, injson);
		var result = res;
		var div = result.data.div
		that.div = div[1]
		for(var i=0; i<div.length; i++){
			var divArea = div[i].divArea
			var style = div[i].style
			var dataObject = style.dataObject
			var replaceConditions = {}
			var divreplaceColumns = style.replaceColumns==undefined?[]:style.replaceColumns
			replaceConditions = processInitialData.replaceConditionstrans(replaceConditions, divreplaceColumns,'','')
			var injson = common.requestDataPre(that.preoptions,divArea,dataObject,replaceConditions,{},that.pageConditions)
			var url = getApp().globalData.app_address + '?method=saas_PageDivData&parse=json'
			const { data: res } = await infolistutil.post2(url, injson);
			var result = res;
			console.log(JSON.parse(JSON.stringify(result)))
			let i18nArr = uni.getStorageSync('i18nArr')
			let i18n = uni.getStorageSync('i18n')
			if(i == 0){
				if (result.rtn != 1) {
					uni.reLaunch({url: '/pages/first/first'});
					return
				}
				if (result.data != '') {
					
					that.commonmod = result.data.div.value
					if (JSON.stringify(that.commonmod) != '[]') {
						var tempcommonmod = that.commonmod
						tempcommonmod.forEach((val)=>{
							val['optype'] = ''
							val.piciconurl = getApp().globalData.pic_address +val.piciconurl
							val.visble = true
							if(i18n === 'en' && i18nArr!=undefined){
								val.menuname = that.$translg(val.menuname,i18nArr)
							}
						})
						that.menulist = tempcommonmod
					}
				}
			}else if(i == 1){
				if (result.data != '') {
					that.commonmod = result.data.div.value
					var menulist2 = that.menulist
					if(i18n === 'en' && i18nArr!=undefined){
						let temcom = that.commonmod
						temcom.forEach((mval)=>{
							mval.menuname = that.$translg(mval.menuname,i18nArr)
						})
						that.commonmod = temcom
					}
					var id = ''
					var pid = ''
					if (JSON.stringify(that.commonmod) != '[]') {
						var tempcommonmod = that.commonmod
						tempcommonmod.forEach((val)=>{
							val['optype'] = ''
							val.piciconurl = getApp().globalData.pic_address +val.piciconurl
							val.visble = true
							for(var j=0;j<menulist2.length; j++){
								if(menulist2[j].menuid == val.menuid){
									menulist2[j].visble = false
									
								}
							}
						})
						that.menulist = util.structureTreeData(menulist2, id = "menuid", pid ="parentmenuid")
						that.list = tempcommonmod
						that.olddatalist = JSON.parse(JSON.stringify(that.list))
					}else{
						that.menulist = util.structureTreeData(menulist2, id = "menuid", pid ="parentmenuid")
					}
				}
			}
		}
	},
	
	methods:{
		deleteitem(args){
			var that = this
			console.log(args)
			var menulist = JSON.parse(JSON.stringify(that.menulist )) 
			that.list = JSON.parse(JSON.stringify( args[1]))
			for(var i=0; i<menulist.length; i++){
				if(JSON.stringify(menulist[i].children) != undefined){
					console.log(menulist[i].children)
					for(var j=0; j<menulist[i].children.length; j++){
						if(menulist[i].children[j].menuname == args[0]){
							menulist[i].children[j].visble = true
							that.menulist = menulist
							return
						}
						if(JSON.stringify(menulist[i].children[j].children) != undefined){
							for(var k=0; k<menulist[i].children[j].children.length; k++){
								if(menulist[i].children[j].children[k].menuname == args[0]){
									menulist[i].children[j].children[k].visble = true
									that.menulist = menulist
									return
								}
							}
						}
					}
				}
			}
		},
		
		onItemClick(index,index2,index3){
			var that = this
			var list = that.list
			console.log(index3)
			if(list.length >= 8){
				uni.showModal({
				    title: that.cnObj.prompt,
				    content: that.cnObj.content,
					showCancel:false
				})
				return
			}
			if(index3 == -1){
				var menuitem = that.menulist[index].children[index2]
				if(menuitem.visble){
					var olddatalist = that.olddatalist
					var optype = ''
					if(JSON.stringify(olddatalist) != '[]'){
						for(var i=0; i<olddatalist.length; i++){
							if(olddatalist[i].menuid != menuitem.menuid){
								optype = 'insert'
							}
						}
					}else{
						optype = 'insert'
					}
					menuitem.optype = optype
					list.push(menuitem)
					that.menulist[index].children[index2].visble = false
				}
			}else{
				var menuitem = that.menulist[index].children[index2].children[index3]
				if(menuitem.visble){
					var olddatalist = that.olddatalist
					var optype = ''
					if(JSON.stringify(olddatalist) != '[]'){
						for(var i=0; i<olddatalist.length; i++){
							if(olddatalist[i].menuid != menuitem.menuid){
								optype = 'insert'
							}
						}
					}else{
						optype = 'insert'
					}
					menuitem.optype = optype
					list.push(menuitem)
					that.menulist[index].children[index2].children[index3].visble = false
				}
			}
			that.list = list
			console.log(JSON.parse(JSON.stringify(that.list)))
		},
		
		async btnclick(index){
			var that = this
			var btns = that.btns
			var todo = btns[index].btnToDo
			var injson = common.requestDate()
			var url = getApp().globalData.app_address + '?method=getDate&parse=json'
			const { data: res } = await infolistutil.post2(url, injson);
			var datestr = res.data.getDate
			console.log(datestr)
			var date = datestr.substring(0,19)
			if(todo == 'save' ){
				if((JSON.stringify(that.list) == JSON.stringify(that.olddatalist))){
					uni.navigateBack({delta: 1})
					return
				}
				if(that.isrequest){
					that.isrequest = false	
					var commitArr = []
					var div = that.div
					var dataList = that.list
					var olddatalist = that.olddatalist
					commitArr = infolistutil.getcommimenu(commitArr, div, dataList, olddatalist)
					
					var injson = common.requestPageCommitData(that.preoptions, btns[index], commitArr)
					var url = getApp().globalData.app_address + '?method=saas_PageCommitData&parse=json'
					uni.showLoading({title: that.cnObj.load})
					const { data: res } = await infolistutil.post2(url, injson);
					var result = res
					console.log(result)
					that.isrequest = true
					uni.hideLoading()
					if(result.rtn == 1){
						var rtndatalist = that.dataList
						uni.showToast({title: that.cnObj.toastTitle,position:'bottom',icon:'none',duration: 1000 })
						setTimeout(function() {
							let pages = getCurrentPages();
							let beforePage = pages[pages.length  -2];
							beforePage.$vm.reload()
							uni.navigateBack({delta: 1})
						}, 1000);
					}else{
						uni.showModal({
							title: that.cnObj.prompt,
							content: result.message,
							showCancel:false
						})
						return
					}
				}	 
			}
		},
	}
};
</script>

<style>
	.icon-jia{
		display: flex;
		position: absolute;
		align-items: center;
		justify-content: center;
		top:15px;
		right: 15px;
		border-radius: 50%;
		height: 20px;
		width: 20px;
		background-color: #f00;
		color:#fff
	}
	
	.drag-item {
		color: #fff;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid #fff;
	}
	
	.list-title {
		box-sizing: border-box;
		padding-left: 20px;
		margin-top: 20px;
		margin-bottom: 20px;
	}
		
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}
	
	.menu {
		display: flex;
	}
	
	.menu.active {
		color: #E08140;
		position: relative;
		background: #ffffff;
	}
	
	.menu_left {
		width: 10rpx;
		background: #E08140;
		padding: 30rpx 0 30rpx 0;
	}
	
	.menu_text {
		text-align: center;
		padding: 30rpx 0 30rpx 0;
		margin-left: 10rpx;
		font-size: 28rpx;
	}
	
	.cq_nav {
		padding: 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		margin-left: -20rpx;
		margin-right: -20rpx;
	}
	
	.cq_nav1 {
		display: flex;position: relative;
	}
	
	.cq_nav_item {
		width: 160rpx;
		height: 190rpx;
		display: flex;
		flex-direction: column;
		align-content: center;
		align-items: center;
		margin-left: 20rpx;
	}
	
	.cq_nav_item_image {
		width: 96rpx;
		height: 96rpx;
		margin-top: 23rpx;
	}
	
	.cq_nav_item_text {
		color: #333333;
		font-size: 22rpx;
		margin: 10rpx 0 10rpx 0;
		white-space:normal; overflow: hidden; overflow-x: hidden; overflow-y: hidden; text-overflow: ellipsis;  display: -webkit-box;  -webkit-box-orient: vertical;-webkit-line-clamp: 1;
	}
	.bottom-wrapper{
		background-color: #fff; 
		height: 40px; 
		width: 100vw;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		position: absolute;
		bottom: 0;
		align-items: center;
		z-index:200;
	}
	.btn-main{
		display: flex;
		height: 100%;
		margin-bottom: 10px;
		justify-content: center;
	}
	.btn-item{
		margin-left: 5vw; 
		width: 90vw; 
		border-radius: 10px; 
		align-items: center; 
		display: flex;
		justify-content: center;
		height: 100%; 
		background-color: #F55C23;
		color: #fff;
	}
</style>
